<template>
  <el-main>
    <el-table
      ref="multipleTable"
      :data="goodList"
      tooltip-effect="dark"
      style="width: 100%"
      >
      <el-table-column
        type="index"
        min-width="50">
      </el-table-column>
      <el-table-column
        prop="name"
        label="商品名称"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        min-width="50">
      </el-table-column>
      <el-table-column
        prop="count"
        label="库存"
        min-width="50">
      </el-table-column>
      <el-table-column
        prop="sales"
        label="销量"
        min-width="50">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="50">
        <template slot-scope="scope">
          <el-button @click="translateGood(scope.row, scope.$index)" type="text" size="small">翻译</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="page-block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="30"
        layout="prev, pager, next, jumper"
        :page-count="pageCount">
      </el-pagination>
    </div>
    <el-dialog title="商品详情" :close-on-click-modal='false' :visible.sync="dialogFormVisible">
      <el-form :model="goodInDialog">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input disabled v-model="goodInDialog.name" auto-complete="off"></el-input>
          <el-input v-model="goodInDialog.translation.zh_CN.name" class="translate" placeholder="请输入“商品名称”翻译"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input disabled v-model="goodInDialog.price" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品库存" :label-width="formLabelWidth">
          <el-input disabled type="number" v-model="goodInDialog.count" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片" :label-width="formLabelWidth">
          <img id="goodpic" :src="goodInDialog.picurl" alt="">
        </el-form-item>
        <el-form-item label="商品简介" :label-width="formLabelWidth">
          <el-input disabled v-model="goodInDialog.description" auto-complete="off"></el-input>
          <el-input v-model="goodInDialog.translation.zh_CN.description" class="translate" placeholder="请输入“商品简介”翻译"></el-input>
        </el-form-item>
        <el-form-item label="商品详情" :label-width="formLabelWidth">
          <el-input disabled rows='4' type="textarea" v-model="goodInDialog.detail" auto-complete="off"></el-input>
          <el-input v-model="goodInDialog.translation.zh_CN.detail" class="translate" placeholder="请输入“商品详情”翻译"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button @click="saveTranslation">保存</el-button>
      </div>
    </el-dialog>
  </el-main>
</template>
<script>
import api from '@/API'
import * as _ from 'lodash'

export default {
  name: 'goods',
  props: {},
  data() {
    return {
      currentPage: 1,
      goodList: [],
      goodInDialog: {
        count: 100,
        description: '',
        detail: '',
        name: '',
        picurl: '',
        price: '',
        sales: 0,
        translation: {
          goodId: '',
          zh_CN: { name: '', description: '', detail: '' }
        }
      },
      formLabelWidth: '80px',
      dialogFormVisible: false,
      pageCount: 0
    }
  },
  created() {
    this.getGoodsByPage(this.currentPage)
    this.getPageCount()
  },
  mounted() {
    // this.getGoodsByPage(this.currentPage)
  },
  methods: {
    handleSizeChange(val) {
      // eslint-disable-next-line
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.getGoodsByPage(parseInt(val, 10))
    },
    saveTranslation() {
      const translation = _.cloneDeep(this.goodInDialog.translation)
      translation.zh_CN = JSON.stringify(translation.zh_CN)
      // use the api to save translation
      api.SAVE_TRANSLATION(translation).then(({ data }) => {
        if (data.status === 200) {
          this.getGoodsByPage(this.currentPage)
          this.dialogFormVisible = false
        }
        this.$message(data.msg)
      })
    },
    translateGood(row) {
      this.goodInDialog = row
      this.dialogFormVisible = true
    },
    getGoodsByPage(page) {
      api.GET_GOODS_BY_PAGE(page).then(({ data }) => {
        if (data.status === 200) {
          const goodList = data.data.goods
          // eslint-disable-next-line
          _.forEach(goodList, (item, index) => {
            if (!item.translation) {
              // eslint-disable-next-line
              item.translation = {
                goodId: item.id,
                zh_CN: { name: '', description: '', detail: '' }
              }
            } else {
              // eslint-disable-next-line
              item.translation.zh_CN = JSON.parse(item.translation.zh_CN)
            }
          })
          this.goodList = goodList
        }
      })
    },
    getPageCount() {
      api.GET_PAGE_COUNT().then(({ data }) => {
        this.pageCount = data.data.pageCount
      })
    }
  }
}
</script>
<style lang="less" scoped>
.el-pagination {
  display: flex;
  justify-content: center;
}
#goodpic {
  width: 50px;
  height: 50px;
}
.page-block {
  margin-top: 10px;
}
.translate {
  margin-top: 10px;
}
</style>
